<template>
<div class="content">
  <div class="w form">
    <el-form :model="form">
      <el-form-item>
        <el-input placeholder="com.zeng" v-model="form.groupId">
          <template slot="prepend">groupId</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="md-test" v-model="form.artifactId">
          <template slot="prepend">artifactId</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="sys" v-model="form.tablePrefix">
          <template slot="prepend">表前缀</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input :disabled="true" :value="path">
          <template slot="prepend">创建位置</template>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
  <div @click="handleCreatedProject" class="button">创建项目</div>

</div>
</template>

<script>
export default {
  name: 'Basic',
  props: ['path'],
  data () {
    return {
      api: {
        created: this.$api.project.createdProject
      },
      form: {
        tablePrefix: 'zyl',
        artifactId: 'md-test',
        groupId: 'com.zeng'
      }
    }
  },
  methods: {
    handleCreatedProject () {
      this.form.path = this.path
      this.$httpf({ url: this.api.created, paras: this.form }, data => {
        this.$router.push('/item')
        this.$emit('handleTabs', 2)
      })
    }
  }
}
</script>

<style scoped lang="less">
  .content {
    width: 1168px;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    .form {
      padding: 15px 0;
      flex: 1 1 100%;
    }
    .button {
      margin: auto;
      width: 190px;
      height: 44px;
      font: 16px/44px Roboto, Avenir, Helvetica, Arial, sans-serif;
      color: white;
      background-color: #42b983;
      text-align: center;
      cursor: pointer;
    }
    .button:hover {
      background-color: rgba(66, 185, 132, .8);
    }
  }
  .w {
    width: 940px;
    margin: 0 auto;
  }
</style>
